<template>
    <div>
        <el-container>
            <el-header class="header-all">
                <!-- 查询区域 -->
                <div style="display: inline;">
                    <el-select placeholder="请选择角色" v-model="user.role">
                        <el-option v-for="item in myRole" :key="item.role" :label="item.role" :value="item.role"></el-option>
                    </el-select>
                    <el-button type="primary" class="but-select" @click="select">搜索</el-button>
                </div>
            </el-header>
            <el-main>
                <el-table :data="UsersList">
                    <el-table-column type="id" width="30px" prop="id"></el-table-column>
                    <el-table-column prop="nickname" width="160px" label="用户名称"></el-table-column>
                    <el-table-column prop="role" width="160px" label="角色名称"></el-table-column>
                    <el-table-column prop="uid" width="130px" label="登录账号"></el-table-column>
                    <el-table-column prop="createtime" width="200px" label="创建日期"></el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </div>
</template>
<script>
export default {
    name: "shi",
    data() {
        return {
            UsersList: [],
            user: {
                createtime: "",
                id: "",
                nickname: "",
                pwd: "",
                role: "",
                uid: "",

            },
            myRole: ""

        }
    },
    created() {
        this.getJsonUser()
        this.getJsonRole()
    },
    methods: {
        getJsonUser() {
            console.log("进入加载列表数据方法")
            var rul = "http://121.37.241.58:8883/logic/baseInfo/sysUser/find?namecn=1"
            this.$axios.get(rul).then(re => {
                console.log(re.data)
                this.UsersList = re.data
            });
        },
        getJsonRole() {
            console.log("进入加载下拉框数据方法")
            var rul = "http://121.37.241.58:8883/logic/baseInfo/sysUser/roleList"
            this.$axios.get(rul).then(re => {
                console.log("-------")
                console.log(re.data)
                this.myRole = re.data
                this.myRole.push({ "role": "全部" })
            });
        },
        select() {
            console.log(this.user.role)
            console.log("进入数据搜索列表数据方法")
            // 默认查询接口 
            var rul = "http://121.37.241.58:8883/logic/baseInfo/sysUser/find?namecn=1"

            // 根据下列选项除全部以外的信息查询接口 
            if (this.user.role != "全部") {
                rul = "http://121.37.241.58:8883/logic/baseInfo/sysUser/find?role=" + this.user.role
            }


            this.$axios.get(rul).then(re => {
                console.log(re.data)
                this.UsersList = re.data
            });

        }

    }
}
</script> 
<style scoped> 
.header-all {
     padding: 0px;
     display: flex;
     justify-content: space-between;
     align-items: center;
}
</style>
